import React, { Component } from 'react'
import PubSub from 'pubsub-js'

export default class Search extends Component {
  search = async () => {
    // 获取用户的输入
    // 连续结构赋值 + 重命名
    const {
      keyWordElement: { value: keyword }
    } = this

    console.log(keyword)
    // 发送请求前通知List更新状态
    PubSub.publish('searchUsers', {
      isLoading: true,
      isFirst: false
    })

    // this.props.updateAppState({
    //   isFirst: false,
    //   isLoading: true
    // })
    // 发送网络请求

    try {
      const response = await fetch(
        `https://api.github.com/search/users?q=${keyword}`
      )
      const data = await response.json()
      PubSub.publish('searchUsers', {
        users: data.items,
        isLoading: false
      })
    } catch (error) {
      console.error('失败了', error)
      PubSub.subscribe('searchUsers', {
        isLoading: false,
        err: error.message
      })
    }

    //
    // axios.get(`https://api.github.com/search/users?q=${keyword}`).then(
    //   (response) => {
    //     console.log('成功了', response)
    //     PubSub.publish('searchUsers', {
    //       users: response.data.items,
    //       isLoading: false
    //     })

    //     // this.props.updateAppState({
    //     //   users: response.data.items,
    //     //   isLoading: false
    //     // })
    //   },
    //   (error) => {
    //     // this.props.updateAppState({
    //     //   isLoading: false,
    //     //   err: error.message
    //     // })
    //     console.error('失败了', error)
    //     PubSub.subscribe('searchUsers', {
    //       isLoading: false,
    //       err: error.message
    //     })
    //  }
    // )
  }
  render() {
    return (
      <div>
        <section className="jumbotron">
          <h3 className="jumbotron-heading">搜索github用户</h3>
          <div>
            <input
              ref={(c) => (this.keyWordElement = c)}
              type="text"
              placeholder="输入关键词点击搜索"
            />
            &nbsp;<button onClick={this.search}>搜索</button>
          </div>
        </section>
      </div>
    )
  }
}
